
<template>
    <div class="chinnelInfoMain">
        <div class="infolist">
          <div class="headerSelection">
            <split-vertical title="渠道信息"></split-vertical>
            <v-form :formProps="searchForm" ref="form"
                    v-on:handleReset="handleReset"
                    v-on:coverFormData="coverFormData">
            </v-form>
          </div>
          <div class="stand">
            <div style="line-height:50px;margin-left:10px;">
              <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
            </div>
            <div style="margin:0 10px;">
              <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
            </div>
          </div>
        </div>
        <div class="block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageCount">
            </el-pagination>
        </div>
        <!-- //编辑信息 -->
        <update-channel v-if="show2" :add='add' @closeDialog='closeDialog'></update-channel>
           <!-- 创建信息 -->
        <create-channel v-if="show" @closeDialog='closeDialog'></create-channel>
    </div>
</template>
<script>
import VTable from "components/common/PageTable/VTable"
import createChannel from 'components/base/ChannelInfo/CreateChannel'
import updateChannel from 'components/base/ChannelInfo/UpdateChannel'
import SplitVertical from "components/common/SplitVertical"
import VForm from "components/common/VForm"
import VButton from "components/common/VButton"

export default {
    components:{
      createChannel, updateChannel,VTable,SplitVertical,VForm,VButton
    },
    inject:['reload'],
    data(){
        return{
            searchCondition:{},
            pageCount: 0,
            pageIndex:1,
            pageSize:10,
            show:false,//控制创建公司信息的显示
            show2:false,//控制编辑公司信息的显示
            //编辑传的对象
            add:{},
            channelName:'',
            channelMobile:'',
            searchForm: {
              col: 3,
              labelWidth: '100px',
              submitBtn: {
                text: '搜索'
              },
              formItemArray: [{
                label: '渠道名称',
                prop: 'channelName',
                placeholder: "请输入渠道名称",
                value: ''
              }, {
                label: '联系人',
                prop: 'channelContact',
                placeholder: "请输入联系人",
                value: ''
              },{
                label: '联系人电话',
                prop: 'channelMobile',
                placeholder: "请输入联系人电话",
                value: ''
              }]
            },
            operationBtnArray: [{
              text: '刷新',
              show: true,
              icon:'el-icon-refresh',
              type: 'primary',
              methodName: 'refresh',
            }, {
              text: '新增',
              icon:'el-icon-plus',
              show: true,
              type: 'success',
              methodName: 'add',
            }],
            tableParams:{
                dataArray:[],
                showMultiSelection:false,
                columnArray:[
                    {label: '渠道名称', prop: 'channelName',width:'150',sortable: false},
                    {label: '渠道地址', prop: 'channelAddress',  sortable: false},
                    {label: '渠道联系人', prop: 'channelContact',width:'120', sortable: false},
                    {label: '联系人电话', prop: 'channelMobile',sortable: false}

                ],
                rowHandle:{
                    view:{
                        show:false
                    }
                }
            },
          id:''
        }
    },
    created(){
      this.init()
    },
    methods:{
        init(){
           this.listVal()
        },
        handleSearchTopBtn(methodName) {
          if (methodName === "refresh") {
            this.refresh();
          } else {
            this.create();
          }
        },
        handleReset(formName) {
          this.$refs.form.resetForm(formName);
        },
        coverFormData(data) {
          this.searchCondition = data;
          this.query()
        },
        handleOperation(rowIndex, row, methodName) {
            this.id=row.id
            if(methodName == "update"){
              this.modifyChannelInfo()
            }else if(methodName == "delete"){
              this.delchannel()
            }
        },
        //刷新
        refresh(){
            this.listVal()
        },
        closeDialog(){
            this.show2 = false;
            this.show = false;
        },
        //初始化新增渠道信息的表格
        listVal(){
            let parmas={
                pageIndex:1,
                pageSize:10
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.tableParams.dataArray=data.data
                    this.pageCount = data.pageCount
                } else{
                    this.$message.error(data.msg)
                }
            }
            this.api.channelList(parmas,success)
        },
        //编辑表格信息
        modifyChannelInfo(){
          this.show2=true
            let parmas={
               id:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.add=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.channelGetOne(parmas,success)
        },
        //查询
        query(){
            let param = this.searchCondition;
            if (!param.pageIndex || !param.pageSize) {
              param['pageIndex'] = this.pageIndex;
              param['pageSize'] = this.pageSize;
            }
            let success = data => {
              if (data.code === 'OK') {
                this.pageCount = data.pageCount;
                this.tableParams.dataArray=data.data
              } else {
                this.$message.error(data.msg);
              }
            };
            this.api.channelList(param,success)
        },
        //删除表格信息
        delchannel(){
            this.$confirm('是否删除该消息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            }).then(() => {
                let parmas={
                    id:this.id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        this.listVal()
                        this.$message.success("删除成功")
                    }else{
                        this.$message.error(data.msg)
                    }
                }
                this.api.channelDelete(parmas,success)
            }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
            });
        },
        //重置清空
        reset(){
            this.channelName='',
            this.channelMobile=''
        },
        //创建渠道信息
        create(){
            this.show=!this.show;
        },
      //当前页
      handleCurrentChange: function (val) {
        this.searchCondition['pageIndex'] = val;
        this.query()
      }
    },
}
</script>

<style lang="scss" scoped>
.chinnelInfoMain{

   .infolist{
     .headerSelection{
       background:#fff;
       height:140px;
       padding: 0 10px;
       border-left: 2px solid #e8e8e8;
       border-right: 2px solid #e8e8e8;
       border-bottom: 2px solid #e8e8e8;
     }
     .stand{
       background:#fff;
     }
   }
  .block{
    padding: 10px 0;
    text-align: right;
  }
}
</style>



